/**
* @description: 通信机房出入工单
* @author: JiWei
* @date:
**/
<template>
	<view class="task-monitor-main">
		<nav-bar class="header" back title="通信机房出入工单" @goBack="goBack">
			<!-- <img slot="scan" src="../../../static/img/add.png" alt="" @click="add"> -->
			<img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
		</nav-bar>

		<view class="header-bar">
			<ul class="menu">
				<li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
					<view class="right-box">
						<text class="menu-num" :class="{selectmenu:item.ZT === current}">{{ item.SL }}</text>
						<text class="menu-state" :class="{selectmenu:item.ZT === current}">{{ item.ZTMC }}</text>
					</view>
					<view :class="{sj:item.ZT === current}"></view>
				</li>
			</ul>
		</view>

		<view class="main-container">
			<!-- 搜索框  -->
			<view class="search">
				<van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
					placeholder="请输入发起人名称" @click="showSearch=true" @cancel="onSearch('')" />
			</view>
			<view class="task-list-container" v-if="taskList.length > 0">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">

                <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
                  <!-- 列表循环   -->
                  <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
                    <van-swipe-cell >
                        <view class="task-title">
                          <view class="task-title-main">
                            <text class="task-title-main-text">{{ item.UPDATENAME }}发起的通信机房出入工单</text>
                          </view>
                          <text class="task-status" :class="color(item.AUDITSTATUS)">
                            <text>{{item.AUDITSTATUSNAME}}</text>
                          </text>
                        </view>
                        <hr class="task-hr">
                        <view class="top-task-main">
                          <text class="task-big-ltitle">发起人:</text>
                          <text class="task-small-ltitle">{{ item.UPDATENAME }}</text>
                          <text class="task-big-rtitle">所属组织:</text>
                          <text class="task-small-rtitle">{{ item.ORGNAME }}</text>
                        </view>
						<view class="top-task-main">
							<text class="task-big-ltitle">发起时间:</text>
							<text class="task-small-ltitle">{{ item.begingTime }}</text>
						</view>
                      <template #right v-if="item.AUDITSTATUSNAME === '已撤销'">
                        <van-button class="delBtn"  type="danger" @click="handleDel(item)" text="删除" />
                      </template>
                    </van-swipe-cell>
                  </view>
                </van-list>
				</van-pull-refresh>
			</view>
		</view>
		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>
		<!--筛选弹窗-->
		<screenPopup :showScreen="showScreen" @closePopup="showScreen=false" @confirm="confirmCondition"
			:otherList="otherList" :typeList="typeList" @reset="reset">
		</screenPopup>
	</view>
</template>
<script>
	import navBar from "../../../components/common/nav-bar";
	import searchEquMatch from '../../common/searchEquMatch'
	import screenPopup from "../common/screenPopup2.vue";
	import plateTitle from "../common/plateTitle.vue";
	import moment from "moment/moment";
	import { mapGetters } from "vuex";
  import { Dialog,Toast } from 'vant';

	export default {
		name: 'communicationApproval',
		components: {
			navBar,
			searchEquMatch,
			screenPopup,
			plateTitle
		},
		props: {},
		data() {
			return {
				searchValue: "",
				showScreen: false,
				showSearch: false,
				taskList: [],
				color: (TASK_STATE) => {
					if (TASK_STATE === '0') {
						return 'left-state-dsp'
					} else if (TASK_STATE === '1') {
						return 'left-state-jj'
					} else if (TASK_STATE === '2') {
						return 'left-state-dzx'
					} else if (TASK_STATE === '3') {
						return 'left-state-ywc'
					} else {
						return 'left-state-ycx'
					}
				},
				refreshing: false, // 是否正在刷新
				isLoading: false,
				finished: false,
				total: 0, // 总条数
				page: 1,
				limit: 20,
				current: '',
				typeList: [
          {
						TITLE: '本周',
						VALUE: 1,
					},
					{
						TITLE: '本月',
						VALUE: 2,
					},
					{
						TITLE: '上月',
						VALUE: 3,
					}
				],
				otherList: [{
						TITLE: '按天',
					},
					{
						TITLE: '按月',
					}
				],
				menuList: [],
				initateTime: 1, //筛选参数 发起时间
				startTime: '', // 其他时间-开始时间
				endTime: '' // 其他时间-结束时间
			};
		},
		computed: {
			...mapGetters(['userData'])
		},
		watch: {},
		onLoad() {
			this.selectRoomListC()
		},
		methods: {
      //获取列表
      selectRoomListC() {
        let params = {
          page: this.page,
          limit: this.limit,
          timeType: this.initateTime,
          startTime: this.startTime,
          endTime: this.endTime,
          updateName: this.searchValue,
          updateUid: this.userData.USERID,
          auditStatus: this.current,
		  modelType:"2"
        }
        this.$api.selectRoomList(params).then(res => {
          this.isLoading = false;
          this.refreshing = false;
          let menuMsg = res.data.state_count;
          this.menuList = menuMsg;
          this.taskList = this.taskList.concat(res.data.taskList.map(item => {
            const begingTime = moment(item.UPDATETIME).format('YYYY-MM-DD HH:mm')
            return {
              begingTime,
              ...item}
          }));
          this.total = res.data.total_number
        })
      },
      handleDel(item) {
        let params = {
          ID:item.MACHINEID,
          userId: this.userData.USERID
        }
        Dialog.confirm({
          message: "是否确认删除？",
        }).then(() => {
          this.$api.deleteRoomOne(params).then(res => {
            if(res.code == 0) {
              Toast.success({
                message:'删除成功'
              })
              this.onRefresh()
            }else {
              Toast('删除失败')
            }
          })
        })

      },
			goBack() {
				uni.navigateTo({
					url: '/pages/operationApprove/index/index'
				})
			},
			add() {
				uni.navigateTo({
					url: `/pages/operationApprove/communicationApproval/initiateApplication`
				})
			},
			onSearch(searchValue) {
				this.searchValue = searchValue;
				this.onRefresh();
				this.showSearch = false;
			},
			loadMore() {
				if (this.total > this.taskList.length) {
					this.page = this.page + 1;
					this.selectRoomListC();
				} else {
					this.finished = true;
				}
			},
			//选择menu菜单
			chooseMenu(item, index) {
				this.current = item.ZT ? item.ZT : '';
				this.onRefresh()
			},
			screen() {
				this.showScreen = true;
			},
			confirmCondition(selected, beginTime, endTime) {
				this.initateTime = selected // 发起时间
				this.startTime = beginTime
				this.endTime = endTime
				this.onRefresh()
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.page = 1;
				this.taskList = [];
				this.selectRoomListC();
			},
      reset() {
        this.initateTime = 1
        this.startTime = ''
        this.endTime = ''
        this.onRefresh()
      },
			//  列表跳转
			jump(item) {
          
				if (item.AUDITSTATUS) {
					uni.navigateTo({
						// 0:待审核,1:审批拒绝,2:待执行,3.已完成4:撤销
						url: `/pages/operationApprove/communicationApproval/detailsPendingApproval?state=${item.AUDITSTATUS}&id=${item.MACHINEID}&userId=${item.USERID}`
					})
				}
			},

		}
	};
</script>
<style scoped lang="scss">
	.task-monitor-main {
		min-height: 100vh;
		background: #F2F6FA;

		.header {
			position: sticky;
			top: 0;

			img {
				width: px2vw(48);
				margin-right: px2vw(40);
			}

			.header-right {
				display: flex;

				/deep/ .van-icon {
					font-size: px2vw(52);
					font-weight: bold;
				}

				/deep/ .van-icon-scan {
					margin-right: px2vw(12);
				}

				/deep/ .van-icon-filter-o {
					margin-left: px2vw(12);
				}
			}
		}

		.header-bar {
			height: px2vh(120);
			border-radius: 0 0 px2vh(40) px2vh(40);
			background: #417ADC;
			margin-bottom: px2vh(130);

			.menu {
				width: px2vw(1020);
				height: px2vh(220);
				background-image: url('../../../static/img/borderR.png');
				background-size: px2vw(1020) px2vh(220);
				//margin-left: px2vw(30);
				margin: 0 auto;
				display: flex;
				justify-content: space-evenly;

				li {
					//width: calc(1 * (100% - #{px2vw(400)}) / 4);
					height: 100%;
					//margin-left: px2vw(80);
					//float: left;
					position: relative;

					.right-box {
						height: px2vh(112);
						//margin-left:px2vw(10);
						float: left;
						margin-top: px2vh(59);
						text-align: center;

						.menu-num {
							display: block;
							font-size: px2vw(54);
							font-weight: bold;
							color: #333;
						}

						.menu-state {
							font-size: px2vw(36);
							color: rgba(51, 51, 51, .7);
						}

						.selectmenu {
							color: #417ADC;
						}
					}

					.sj {
						width: px2vw(78);
						height: px2vh(66);
						position: absolute;
						bottom: px2vh(-34);
						//right: px2vw(40);
						left: 50%;
						transform: translateX(-50%);
						background-image: url('../../../static/img/sj.png');
						background-size: px2vw(78) px2vh(66);
					}
				}
			}
		}

		.task-info-container,
		.task-assignment-item {
			border-radius: $border-radius-base;
			overflow: hidden;
			background-color: #ffffff;
		}

		.main-container {
			height: calc(100vh - #{px2vh(1020)});

			.search {
				width: px2vw(1020);
				height: 38px;
				margin: px2vw(30) px2vh(30);
				border-radius: px2vw(20);
				overflow: hidden;

				.van-search {
					padding: 0 0;
					height: 38px;
				}

				.van-search__content {
					background: #fff;
					height: 38px;
				}

				/deep/ .van-field__control {
					height: 30px;
				}
			}

			.screen-type-item {
				margin-bottom: px2vh(30);

				.plate-title {
					margin-bottom: px2vh(36);
				}

				.screen-option-container {
					display: flex;
					//justify-content: space-between;
					flex-wrap: wrap;

					.screen-option-item {
						width: px2vw(260);
						height: px2vh(90);
						margin-bottom: px2vh(20);
						line-height: px2vh(90);
						background: #f7f7f7;
						color: #666;
						font-size: px2vh(36);
						text-align: center;
						border-radius: $border-radius-base;
					}

					.screen-option-item:not(:nth-child(3n)) {
						margin-right: px2vw(20);
					}

					.screen-option-item.active {
						background: #ecf1fb;
						color: #417ADC;
					}
				}
			}

			.task-list-container {
				height: calc(100vh - #{px2vh(443)} - 38px);
				overflow: auto;
				.task-list {
					width: px2vw(1020);
					background: #fff;
					border-radius: px2vw(20) px2vh(20);
					margin: 0 px2vw(30) px2vh(30) px2vw(30);

					.task-title {
						width: px2vw(940);
						height: px2vh(80);
						margin-left: px2vw(40);
						padding-top: px2vw(30);
						margin-bottom: px2vh(30);
						display: flex;
						align-items: center;
						justify-content: space-between;

						.task-title-main {
							display: flex;
							align-items: center;
						}

						.task-title-main-text {
							width: px2vw(750);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-left: px2vw(20);
							font-size: px2vh(48);
						}

						.task-status {
							width: px2vw(150);
							height: px2vh(50);
							line-height: px2vh(50);
							border-radius: px2vw(10);
							font-size: px2vw(32);
							text-align: center;
							margin-top: px2vw(8);
						}

						.left-state-ywc {
							color: #3CDA68;
							background: rgba(60, 218, 104, .1);
						}

						.left-state-dsp {
							color: #FFAD0E;
							background: rgba(255, 173, 14, .1);
						}

						.left-state-jj {
							color: #FF7070;
							background: rgba(255, 112, 112, .1);
						}

						.left-state-dzx {
							color: #417ADC;
							background: rgba(65, 122, 220, .1);
						}

						.left-state-ycx {
							color: #8C8C8C;
							background: rgba(140, 140, 140, .1);
						}
					}

					.task-hr {
						width: px2vw(940);
						border: px2vh(1) solid #e5e5e5;
						margin-left: px2vw(40);
						margin-bottom: px2vh(42);
					}
          .delBtn {
            height: 100%;
            background: #FF4355;
            border-radius: px2vw(0) px2vw(20) px2vw(20) px2vw(0);
          }
					.top-task-main {
						width: px2vw(900);
						font-size: px2vh(36);
						line-height: px2vh(62);
						margin-left: px2vw(60);
            padding-bottom: px2vw(30);
						.task-big-ltitle,
						.task-big-rtitle {
							color: #666;
						}

						.task-small-ltitle,
						.task-small-rtitle {
							margin-left: px2vw(25);
							color: #333;
						}

						.task-big-rtitle {
							margin-left: px2vw(40);
						}
					}
          /deep/.van-swipe-cell__right {
            //padding-top: px2vh(30);
          }
				}
			}
		}
	}
</style>
